import React, {useState, useEffect} from 'react';
import {withRouter} from 'react-router-dom'
import {Flex, Toast, Modal, Badge, Carousel, NoticeBar} from 'antd-mobile';
import _ from 'lodash'

import {homeInfoOfTutor} from '@/api/home.js'
import {R} from "@/assets/js/dict"

import './home.scss';

import a from '@/assets/img/a.jpg';
import b from '@/assets/img/b.jpg';
import './home.scss';

const alert = Modal.alert;

function TutorHome(props) {

    let [badge, setBage] = useState({msg: 0, teaching: 0, history: 0, pre: 0});
    let [latestMsg, setMsg] = useState("欢迎使用鹏睿家教");

    function handleGoPage(url, data) {
        props.history.push({
            pathname: url,
            params: {
                data,
            }
        })

    }


    // 家教查看 消息数量
    let init = () => {

        let postData = {
            tutor_id: JSON.parse(sessionStorage.getItem('userInfo')).id
        };

        homeInfoOfTutor(postData, (re) => {
            if (R.isSuccess(re)) {
                let data = R.getData(re);
                if(data.count > 0){
                    badge.msg = data.count;
                }
                if(data.history > 0){
                    badge.history = data.history;
                }
                if(data.teaching > 0){
                    badge.teaching = data.teaching;
                }
                if(data.pre > 0){
                    badge.pre = data.pre;
                }
                setBage(_.cloneDeep(badge));
                if (!!data.message_content) {
                    setMsg(data.message_content);
                }
                setBage(_.cloneDeep(badge));
            }
        });
    };


    // 根据身份显示不同的模块
    function FunctionBlock() {
        return (
            <div>
                <Flex justify="center" className="block-box" style={{bottom: '35%'}}>
                    <div className="inline-block">
                        <span onClick={() => {
                            handleGoPage('/helpDetails')
                        }}
                        >
                            <i className="icon notice"/>
                            家教须知
                        </span>
                    </div>
                    <div className="inline-block">
                        <span onClick={() => {
                            handleGoPage('/materialsDetails')
                        }}
                        >
                            <i className="icon learning"/>
                            测前学习
                        </span>
                    </div>
                    <div className="inline-block">
                        <span onClick={() => {
                            handleGoPage('/evaluation')
                        }}
                        >
                            <i className="icon form"/>
                            能力测评
                        </span>
                    </div>
                </Flex>

                <Flex justify="center" className="block-box" style={{bottom: '15%'}}>
                    <div className="inline-block" onClick={() => {
                        handleGoPage('/workingOrdersOfTutor')
                    }}
                    >
                        <Badge text={badge.teaching} size="small">
                        <span>
                            <i className="icon list"/>
                            正在教学
                        </span>
                        </Badge>
                    </div>
                    <div className="inline-block" onClick={() => {
                        handleGoPage('/preOrder')
                    }}
                    >
                        <Badge text={badge.pre} size="small">
                        <span>
                            <i className="icon pending"/>
                            待定订单
                        </span>
                        </Badge>
                    </div>
                    <div className="inline-block" onClick={() => {
                        handleGoPage('/historyOrdersOfTutor')
                    }}
                    >
                        <Badge text={badge.history} size="small" overflowCount={99}>
                        <span>
                            <i className="icon history"/>
                            历史订单
                        </span>
                        </Badge>
                    </div>
                </Flex>
            </div>
        )

    }

    useEffect(() => {
        init()
    }, []);

    function load() {
        window.dispatchEvent(new Event('resize'));
    }

    return (
        <div className="tutor-home">
            <div className="page-title  home-tit">
                首页

                <span className="infos" onClick={() => {
                    handleGoPage('/messagesOfTutor')
                }}
                >
                    <Badge text={badge.msg} size="small" overflowCount={99}>
                        <i className="icon"/>
                    </Badge>
                </span>

            </div>
            <div className="page-content  home-content">
                <Carousel
                    infinite
                >
                    <img
                        src={a}
                        style={{width: '100%', height: '160px', verticalAlign: 'top'}}
                        onLoad={load}
                    />
                    <img
                        src={b}
                        style={{width: '100%', height: '160px', verticalAlign: 'top'}}
                        onLoad={load}
                    />
                </Carousel>
                <NoticeBar marqueeProps={{loop: true, style: {padding: '0 7.5px'}}}>
                    {latestMsg}
                </NoticeBar>
                {FunctionBlock()}
            </div>
        </div>
    );
}

export default withRouter(TutorHome);